<template>
  <div class="layout_container">
    <!-- 左侧菜单 -->
    <div class="layout_slider">
      <Logo></Logo>
      <!-- 滚动组件 -->
      <el-scrollbar class="scrollbar">
        <!-- 菜单组件 -->
        <el-menu
          background-color="#001529"
          text-color="#ffffff"
          active-text-color="skyblue"
        >
          <!-- 根据路由动态生成菜单 -->
          <Menu :menuList="userStore.menuRoutes"></Menu>
        </el-menu>
      </el-scrollbar>
    </div>
    <!-- 顶部导航 -->
    <div class="layout_tabbar">tabber</div>
    <!-- 内容展示区域 -->
    <div class="layout_main">
      <div class="layout_main-container">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入左侧菜单logo子组件
import Logo from '@/layout/logo/index.vue'
//引入菜单组件
import Menu from '@/layout/menu/index.vue'
//获取用户相关的小仓库
import userUserStore from '@/store/modules/user1'
let userStore = userUserStore()
</script>

<style lang="scss" scoped>
.layout_container {
  width: 100%;
  height: 100vh;
  //  background-color: $color;
  .layout_slider {
    width: $base-menu-width;
    height: 100vh;
    background-color: $backcolor2;
    box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
    color: aliceblue;
    overflow: hidden;
    .scrollbar {
      width: 100%;
      height: calc(100vh - $base-menu-logo-height);
      // margin-left: 15px;
      .el-menu {
        border-right: none;
      }
    }
  }
  .layout_tabbar {
    position: fixed;
    width: calc(100% - $base-menu-width);
    height: $base-tabber-height;
    background-color: $color;
    top: 0;
    left: $base-menu-width;
  }
  .layout_main {
    position: absolute;
    width: calc(100% - $base-menu-width);
    height: calc(100vh - $base-tabber-height);
    background-color: yellowgreen;
    top: $base-tabber-height;
    left: $base-menu-width;
    //  padding-left: 20px;
    overflow: auto;
    .layout_main-container {
      padding: 20px;
    }
  }
}
</style>
